{extend name="base"}
{block name="main"}
<div style="margin: 10px; text-align: right;">
<!-- <a href="{:url('index')}" class="el-button el-button--warning el-button--mini">返回</a> -->
</div>
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<a href="{:url('index')}" class="el-button el-button--warning el-button--small">返回</a>
			<!-- <el-button type="warning" size="small" @click="onGet('{:url('updateCache')}')">更新缓存</el-button> -->
			<el-button type="primary" size="small" @click="add">添加微信号</el-button>
		</el-col>
		<el-col :span="24"><div style="text-align: center; padding: 5px;">设备信息</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">ID：{$device.id}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">登录名：{$device.login_name}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">设备名称：{$device.name}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">电话号码：{$device.tel}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">版本号：{$device.version}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">手机UDID：{$device.udid}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">说明：{$device.remark}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">性别：{if condition="$device.sex eq 0"}女{elseif condition="$device.sex eq 1" /}男{elseif condition="$device.sex eq 2" /}保密{/if}</div></el-col>
		<el-col :span="6"><div style="padding: 5px;">状态：{if condition="$device.status eq 0"}隐藏{elseif condition="$device.status eq 1" /}显示{/if}</div></el-col>
	</el-row>
	</el-row>

	<el-table
		:default-expand-all="false"
		border
	    :data="tableData"
	    style="width: 100%">
	    <el-table-column
	      label="ID"
	      prop="id"
	      :width="80"
	      align="center">
	    </el-table-column>
	    <el-table-column
	      label="微信号"
	      prop="login_name">
	    </el-table-column>
	    <el-table-column
	      label="微信昵称"
	      prop="name">
	    </el-table-column>
	    <el-table-column
	      label="性别"
	      align="center"
	      prop="sex">
	    </el-table-column>
	    <!-- <el-table-column
	      label="Icon"
	      prop="icon"> -->
	    </el-table-column>
	    <el-table-column
	      label="电话号码"
	      align="center"
	      prop="tel">
	    </el-table-column>
	    <el-table-column
	      label="状态"
	      align="center"
	      prop="status"
	      :formatter="dateFormats">
	      <template slot-scope="status">
	        	<span v-if="status.row.status == 0">
	        		隐藏
	        	</span>
	        	<span v-else>
	        		显示
	        	</span>
	        	
	        </template>
	    </el-table-column>
	    <!-- <el-table-column
	        label="子集"
	        align="center"
	        :width="60"
	        >
	        <template slot-scope="c">
	        	<span v-if="c.row.children" style="color: #666;">
	        		{{c.row.children.length}}
	        	</span>
	        	<span v-else style="color: #666;">
	        		0
	        	</span>
	        	
	        </template>
	    </el-table-column> -->
	    
	    <el-table-column label="操作" width="450">
	    	<template slot-scope="c">
	    		<!-- <el-button type="danger" size="mini" @click="onGet('{:url(\'del\')}?id='+c.row.id,true)">删除</el-button> -->
	    		<el-button v-if="c.row.status == 1" type="danger" size="mini" @click="close(c.row.id,0)">隐藏</el-button>
	    		<el-button v-if="c.row.status == 0" type="primary" size="mini" @click="close(c.row.id,1)">显示</el-button>
				<!-- <el-button type="success" size="mini" @click="ahref(c.row)">查看</el-button> -->
				<el-button type="info" size="mini" @click="edit(c.row)">编辑</el-button>
	    	</template>
	    </el-table-column>
	</el-table>

	<div class="page">{$list->render()|raw}</div>

	<!-- 添加菜单 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="addVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">

			<el-form-item label="微信号" prop="number">
				<el-input v-model="data.number" placeholder="请输入微信号"></el-input>
			</el-form-item>
			<el-form-item label="微信昵称" prop="name">
				<el-input type="text" v-model="data.name" placeholder="请输入微信昵称"></el-input>
			</el-form-item>
			<el-form-item label="登录名" prop="login_name">
				<el-input type="text" v-model="data.login_name" placeholder="请输入登录名"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="login_pwd">
				<el-input type="text" v-model="data.login_pwd" placeholder="请输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="电话号码" prop="tel">
				<el-input type="text" v-model="data.tel" placeholder="请输入电话号码"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" v-model="data.remark" placeholder="请输入备注"></el-input>
			</el-form-item>
			<!-- <el-form-item label="Icon">
				<el-input type="text" v-model="data.icon" placeholder="图标"></el-input>
			</el-form-item> -->
			<el-form-item label="性别">
				<el-radio-group v-model="data.sex">
				    <el-radio :label="0">女</el-radio>
				    <el-radio :label="1">男</el-radio>
				    <el-radio :label="2">保密</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio-group v-model="data.status">
				    <el-radio :label="0">隐藏</el-radio>
				    <el-radio :label="1">显示</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="addVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'updsotf\',array('device_id'=>$device['id']))}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加菜单 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		addVisible:false, //添加菜单框
		dialogTitle:'添加微信账号',
		data:{}, // 添加、编辑数据
		rules:{
			number:[
				{required: true, message:'请输入微信号'},
			],
			name:[
				{required: true, message:'请输入微信昵称'},
			],
			login_name:[
				{required: true, message:'请输入登录名'},
			],
			login_pwd:[
				{required: true, message:'请输入登录密码'},
			],
			tel:[
				{required: true, message:'请输入电话号码'},
			],
			status:[
				{required: true, message:'请选择账号状态'},
			],
		},
	},
	watch:{
		// navsType(newVal){
		// 	location.href="{:url('')}?type="+this.navsType;
		// }
	},
	created(){
		this.emptyData();
	},
	methods:{
		rowStyle(){
			return {'background-color':'#eee'}
		},
		emptyData(newData={}){
			this.data=Object.assign({
				// type:this.navsType,
			},newData);
		},
		showDialog(isShow=true){
			this.addVisible=isShow;
		},
		// 上移
		upRecord(){

		},
		// 下移
		downRecord(){

		},
		// 添加子集
		addChildren(pid=0){
			this.add({pid});
		},
		// 新增
		add(data){
			this.dialogTitle='添加微信账号';
			this.emptyData(data);
			this.showDialog();
		},
		// 编辑
		edit(row){
			this.dialogTitle='编辑微信账号';
			this.emptyData(row);
			this.showDialog();
		},
		// // 隐藏、启用菜单
		// close(row){
		// 	this.onGet("{:url('close')}?id="+row.id,false,res=>{
		// 		if(res.code){
		// 			row.status=Math.abs(row.status-1);
		// 		}
		// 	});
		// },
		// 隐藏、启用设备
		close(id,status){
			this._wspost("{:url('updsotf')}",{'id':id,'status':status});
		},
		// 跳转到设备信息页面
		ahref(row){
			console.log('{:url('software')}?id='+row.id)
			// 跳转
			window.location.href = '{:url('software')}?id='+row.id
		},
		// // 上下移动
		// upRecord(navs,c,isChild=false){
		// 	let i=c.$index;
		// 	if(i<1)return;
		// 	let rows;
		// 	if(isChild){
		// 		rows=navs.row.children;
		// 	}else{
		// 		rows=navs;
		// 	}
		// 	let t1=rows[i],t2=rows[i-1];
		// 	let data=[
		// 		{id:t1.id,sort:t2.sort},
		// 		{id:t2.id,sort:t1.sort},
		// 	];
		// 	this._wspost("{:url('record')}",{val:data},res=>{
		// 		if(res.code>0){
		// 			let temp=t1.sort;
		// 			t1.sort=t2.sort;t2.sort=temp;
		// 		    rows.splice(i-1,2,t1,t2);
		// 		}
		// 	},false)
		// },
		// // 上下移动
		// downRecord(navs,c,isChild=false){
		// 	let i=c.$index;
		// 	if(i===c.length){
		// 		return;
		// 	}
		// 	let rows;
		// 	if(isChild){
		// 		rows=navs.row.children;
		// 	}else{
		// 		rows=navs;
		// 	}
		// 	let t1=rows[i+1],t2=rows[i];
		// 	let data=[
		// 		{id:t1.id,sort:t2.sort},
		// 		{id:t2.id,sort:t1.sort},
		// 	];
			
		// 	this._wspost("{:url('record')}",{val:data},res=>{
		// 		if(res.code>0){
		// 		    let temp=t1.sort;
		// 			t1.sort=t2.sort;t2.sort=temp;
		// 		    rows.splice(i,2,t1,t2);
		// 		}
		// 	},false);
		// },
	},
});
</script>
{/block}